<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- a,1 创建页面结构 -->
    <div id="app">
        <!-- a,3 -->
        <router-link to="/">主页</router-link>
        <router-link to="/product">产品</router-link>
        <a href="#/">hash模式主页</a>
        <a href="#/product">hash模式产品</a>
        <!-- a.4 路由的出口 -->
        <router-view></router-view>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // a,5 定义组件
    const Home = {
        template: `<div>主页</div>`,
    };
    const Product = {
        template:`<div>产品</div>`,
    };
    const PageNotFound = {
        template:`<h1>404</h1>`,
    };
    //a,6 定义组件和路由的对应关系
    //注意点:routes 名字不能改
    const routes = [
        {
            path:"/",
            component:Home,
            name:"home", //命名路由
        },
        {
            path:"/product",
            component:Product,
            name:"product",
        },
        {
            path:"/404",
            component:PageNotFound,
            name:"404",
        },
        {
            path:"/*",
            redirect:"/404",
        },
    ];
    // a.7 
    //VueRouter 真正的跟路由
    let router = new VueRouter({
        mode:"history", // #/product => /product
        routes,
        //routes:routes
    });
    //a.2 
    let vm = new Vue({
        //a.8 作为配置传到Vue实例中
        router,
        el:"#app",
    });
</script>
</html>